<template>
	<view>
		<!-- 共识票余额 -->
		<hx-navbar title="共识票余额" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="body_class"  >
			<view class="body_head_mess">
				<view class="head_image">
					<image style="width: 100%;height: 100%;" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="head_name_mess" :style="{color:knavTitleColor}">
					我的昵称
				</view>
			</view>
			<view class="mess mage10" :style="{'background':buttonBcak}">
				<view class="left_class">
					<view class="name_mess">
						共识票余额
					</view>
					<view class="sum_mess">
						12
					</view>
				</view>
				<view class="create_class">
					<view class="link">

					</view>
				</view>
				<view class="right_class">
					<view class="name_mess">
						已投出共识票
					</view>
					<view class="sum_mess" @click="ticketDetail">
						24
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="" style="display: flex;border-bottom: 1px solid #dadada;height: 150rpx;" v-for="item in list">
                     <view class="detail_left">
                     	<view class="detail_name" :style="{color:knavTitleColor}">
                     		{{item.name}}
                     	</view>
						<view class="detail_date">
							{{item.date}}
						</view>
                     </view>
					 <view class="detail_right">
					 <view class="detail_sum" :style="{'color':selectColorSize}">
					 	{{item.sum}}
					 </view>
					 <view class="detail_sumUP" :style="{'color':selectColorSize}">
					 总票数：{{item.sumUp}}11
					 </view>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectColorSize: this.$store.state.selectColorSize, //字体颜色
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				list: [{
					id: 1,
					name: "投给***作品",
					date: "2022-10-19 11:00",
					sum: '+1',
					sumUp: "12"
				}, {
					id: 2,
					name: "投给***作品",
					date: "2022-10-19 11:00",
					sum: '+1',
					sumUp: "12"
				}, {
					id: 3,
					name: "投给***作品",
					date: "2022-10-19 11:00",
					sum: '+1',
					sumUp: "12"
				}, ]
			}
		},
		onPullDownRefresh() {

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)

		},
		methods: {
ticketDetail(){
	uni.navigateTo({
		url:'/pages/aipicture/ticket_detail/ticket_detail'
	})
}
		}
	}
</script>

<style lang="scss" scoped>
	.mage10 {
		margin: 30rpx auto;
	}

	.body_class {
		margin: 10rpx auto;
		width: 690rpx;
		
	}

	.body_head_mess {
		display: flex;

		.head_image {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50rpx;
		}

		.head_name_mess {
			margin-left: 20rpx;
			width: 120rpx;
			height: 50rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			line-height: 50rpx;
		}
	}

	.mess {
		border-radius: 10rpx;
		width: 690rpx;
		height: 148rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;

		.left_class {
			width: 330rpx;

		}

		.create_class {
			width: 20rpx;
		}

		.right_class {
			width: 330rpx;
		}
	}

	.name_mess {
		// width: 140rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #ebebeb;
		line-height: 64rpx;
	}

	.sum_mess {
		height: 58rpx;
		font-size: 40rpx;

		font-weight: bold;
		color: #FFFFFF;
		line-height: 58rpx;
	}

	.link {
		border: 1px solid  #eaeaea78;
		width: 1rpx;
		height: 50rpx;
		margin: 50rpx auto;
	}

	.detail {
	}
	.detail_left{
		width: 520rpx;
		
	}
	.detail_name{
		width: 500rpx;
		height: 90rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 90rpx;
	}
	.detail_date{
		width: 414rpx;
		height: 26rpx;
		font-size: 26rpx;
	 
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
	}
	.detail_right{
		width: 190rpx;
		text-align: right;
	
	}
	.detail_sum{
			height: 90rpx;
			line-height: 90rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #673DE7;
		 
	}
	.detail_sumUP{
	 
		font-size: 26rpx;
		 
		font-weight: 400;
		color: #7051DD;
		line-height: 26rpx;
	}
</style>